<template>
  <ContentWrap>
    <!-- 搜索工作栏 -->
    <el-form ref="queryFormRef" :model="queryParams" class="-mb-15px" label-width="120px">
      <el-row :gutter="20">
        <el-col :span="8"
          ><el-form-item
            label="资产信息检索"
            required
            prop="path"
            v-hasPermi="['amp:information-retrieval:select']"
          >
            <UploadFile v-model="queryParams.path" :limit="1" class="min-w-80px" /> </el-form-item
        ></el-col>
        <el-col :span="8">
          <el-form-item label="相似度阈值" prop="threshold">
            <el-slider v-model="queryParams.threshold" /> </el-form-item
        ></el-col>
        <el-col :span="8">
          <el-form-item label="相似度指纹算法" prop="likeSignAlgo" label-width="140px">
            <el-checkbox-group v-model="queryParams.likeSignAlgo" style="display: inline">
              <el-checkbox label="MD5" :value="1" />
              <el-checkbox label="KFS" :value="2" />
              <el-checkbox label="PFS" :value="3" />
              <el-checkbox label="PSA" :value="4" />
            </el-checkbox-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-form-item class="float-right">
            <el-button @click="handleQuery()">
              <Icon
                class="mr-5px"
                icon="ep:search"
                v-hasPermi="['amp:information-retrieval:search']"
              />
              搜索
            </el-button>
            <el-button @click="resetQuery">
              <Icon
                class="mr-5px"
                icon="ep:refresh"
                v-hasPermi="['amp:information-retrieval:search']"
              />
              重置
            </el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </ContentWrap>
  <ContentWrap>
    <el-button type="primary" @click="viewGraph" v-if="list.length > 0"
      >查看相似文件关系统计图</el-button
    >
    <el-table v-loading="loading" :data="list" :show-overflow-tooltip="true">
      <el-table-column prop="id" width="150" label="资产id" align="center" />
      <el-table-column prop="similarity" label="相似度" align="center" width="150px">
        <template #default="{ row }">
          {{ (row.similarity * 100).toFixed(2) + '%' + `(${row.fingerType})` }}
        </template>
      </el-table-column>
      <el-table-column prop="fileName" label="文件名称" align="center" width="150px" />
      <el-table-column prop="fileType" label="文件类型" align="center" />
      <el-table-column prop="fileSize" label="文件大小" align="center" />
      <el-table-column
        label="文件指纹"
        :formatter="(row) => renderFinger({ row })"
        width="200px"
        align="center"
      />
      <el-table-column
        label="文件来源"
        :formatter="(row) => sourceRender({ row })"
        width="150px"
        align="center"
      />
      <el-table-column prop="templateName" label="数据标准" align="center" width="150px" />
      <el-table-column prop="sysName" label="归属机构" align="center" width="150px" />
      <el-table-column prop="deptName" label="归属系统" align="center" width="150px" />
      <el-table-column
        label="分类"
        :formatter="(row) => renderClassification({ row })"
        width="150px"
        align="center"
      />
      <el-table-column
        label="分级"
        :formatter="(row) => renderLevel({ row })"
        align="center"
        width="150px"
      />
      <el-table-column prop="institutionFiled3" label="保密期限" align="center" />
      <el-table-column prop="field1" label="定密日期" align="center" width="200px" />
      <el-table-column prop="field2" label="解密日期" align="center" width="200px" />
      <el-table-column prop="deadlineLevelName" label="到期后变更等级" align="center" />
      <el-table-column prop="auditApplyTime" label="创建时间" align="center" width="200px" />
      <el-table-column label="操作项" align="center" fixed="right" width="200px">
        <template #default="{ row }">
          <div>
            <el-button link type="primary" @click="openDetail(row)"> 查看 </el-button>
            <ns-button link type="danger" @click="handleDel(row)" confirm> 删除</ns-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <Pagination
      v-model:limit="queryParams.pageSize"
      v-model:page="queryParams.page"
      :total="total"
      @pagination="getList(false)"
    />
    <LinkGraph
      :dialogVisible="dialogVisible"
      v-if="dialogVisible"
      @close="dialogVisible = false"
      :filesData="list"
    />
  </ContentWrap>
</template>

<script setup lang="ts">
import { getFileSimilar, delFileSimilar } from '@/api/develop/informationRetrieval'
import LinkGraph from './LinkGraph.vue'
import { renderFinger, sourceRender, renderClassification, renderLevel } from '@/utils/commonRender'

const isNewFile = ref(true)
const queryFormRef = ref() // 搜索的表单
const total = ref(0) // 列表的总页数
const loading = ref(false) // 列表的加载中
const list = ref([]) // 列表的数据
const dialogVisible = ref()
const queryParams: any = reactive({
  page: 1,
  pageSize: 10,
  path: [],
  threshold: 50,
  likeSignAlgo: [1, 2]
})

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.page = 1
  getList(isNewFile.value)
  isNewFile.value && (isNewFile.value = false)
}
/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value.resetFields()
  list.value = []
  total.value = 0
}
const message = useMessage() // 消息弹窗
/** 查询列表 */
const getList = async (reCompare = true) => {
  if (loading.value) return
  if (queryParams.path.length === 0) {
    message.warning('请上传文件')
    return
  }
  loading.value = true
  const params = {
    ...queryParams,
    path: queryParams.path[0]?.path,
    threshold: (queryParams.threshold / 100).toFixed(2),
    reCompare
  }
  try {
    const { count, data } = await getFileSimilar(params)

    data.forEach((item) => {
      item.ancestorsName =
        item.ancestors && item.ancestors.length > 0 ? concatenateNames(item.ancestors) : ''
    })
    list.value = data
    console.log('list.value', list.value)
    total.value = count
  } finally {
    loading.value = false
  }
}

const viewGraph = () => {
  dialogVisible.value = true
}

const { proxy } = getCurrentInstance() as any
const openDetail = (row) => {
  proxy?.$Drawer({
    params: {
      ...row,
      type: row.handClassificationName ? `人工` : row.classificationName ? `自动` : '--',
      callBack: () => {
        getList()
      }
    },
    title: `查看详情`,
    size: '40%',
    component: import('@/views/assetManage/components/baseInfo.vue')
  })
}

const handleDel = async (row) => {
  const { code } = await delFileSimilar({ ids: [row.compareId] })
  if (code == 200) {
    ElMessage.success('删除成功')
    handleQuery()
  }
}

function concatenateNames(data) {
  let concatenatedNames = ''
  // data.forEach((obj) => {
  concatenatedNames += data[0].name
  if (data[0].children && data[0].children.length > 0) {
    concatenatedNames += '/' + concatenateNames(data[0].children)
  }

  concatenatedNames += '/'
  // })

  if (concatenatedNames.endsWith('/')) {
    concatenatedNames = concatenatedNames.slice(0, -1)
  }

  return concatenatedNames
}

watch(
  () => queryParams.path[0],
  () => {
    isNewFile.value = true
  }
)
</script>
